<template>
	<view class="tabs" :style="{'top':top+'px'}">
		<view v-for="(item,index) in list" :key="index" @tap="changeTab(index)">
			<text :class="index==current?'active':''">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'topTabs',
		props: {
			list: {
				typeof: Array,
				default: []
			},
			top: {
				typeof: Number,
				default: 0
			}
		},
		data() {
			return {
				current: 0
			}
		},
		methods: {
			changeTab(index) {
				this.current = index;
				this.$emit('changeTab', index);
			}
		}
	}
</script>

<style lang="less">
	.tabs {
		background: #fff;
		padding: 26rpx 0;
		display: flex;
		align-items: center;
		width: 100%;
		// position: fixed;
		// z-index: 999;

		&>view {
			width: 25%;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #777777;
			line-height: 40rpx;
			position: relative;
			text-align: center;
		}

		.active {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #007A69;
			line-height: 45rpx;
		}

		.active::after {
			position: absolute;
			content: '';
			width: 84rpx;
			height: 8rpx;
			background: #007A69;
			bottom: -26rpx;
			left: 50%;
			margin-left: -42rpx;
		}
	}
</style>